<template>
	<a-config-provider :locale="locale">
		<div id="app" style="height: 100%">
			<keep-alive><router-view></router-view></keep-alive>
			<div class="download" v-if="hasNewVersion">
				<div class="confirm" id="confirm">
					<div>
						<div class="title">{{ error ? '更新出错，请手动下载安装' : '有新版本需要升级' }}</div>
						<div style="text-align: center">当前版本{{ curVersion }}</div>
						<div class="desc" v-if="upgradeDesc">{{ upgradeDesc }}</div>
						<div style="width: 80%; margin: 10px auto 0" v-if="uploading">
							<a-progress :percent="progress" />
						</div>
						<div class="buttonGroup">
							<template v-if="!uploading && progress < 100">
								<a href="javascript:;" @click="cancel">暂不</a>
								<a
									href="javascript:;"
									:class="{ disabled: error && !upgradePath }"
									class="comfirmBtn"
									@click="startUpload"
									>{{ error ? '手动下载' : '升级' }}</a
								>
							</template>
							<a
								v-else
								href="javascript:;"
								class="comfirmBtn"
								:class="{ disabled: progress < 100 }"
								@click="quitAndInstall"
								>立即重启</a
							>
						</div>
						<div style="color: #f00; text-align: center; margin-top: 10px">
							自动升级需要时间很长，可以选择课间更新
						</div>
					</div>
				</div>
			</div>
		</div>
	</a-config-provider>
</template>

<script>
import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
import { updateTheme } from '@/pro-layout/utils/dynamicTheme';
import defaultSettings from '@/config/defaultSettings';
import { mapState, mapActions, mapMutations } from 'vuex';
import { sysManageapi, postAction } from '@/api/index.js';
export default {
	name: 'app',
	data() {
		return {
			locale: zhCN,
			progress: 0,
			hasNewVersion: false,
			uploading: false,
			error: false,
			upgradePath: '', //手动下载地址
			curVersion: '',
			upgradeDesc: '',
		};
	},
	computed: {
		...mapState(['isPro']),
	},
	watch: {
		isPro(newValue, oldValue) {
			if (newValue != oldValue) {
				//updateTheme(newValue ? '#5697f5' : defaultSettings.primaryColor);
			}
		},
	},
	mounted() {
		console.log('this.isPro', this.isPro);
		//updateTheme(this.isPro ? '#5697f5' : defaultSettings.primaryColor);
	},
	created() {
		this.GetInfo();
		let that = this;
		if (window.ipcRenderer) {
			// window.ipcRenderer.send('setmainInfo', 'Hello from web!');
			//页面初始化成功
			window.ipcRenderer.send('initPage');
			window.ipcRenderer.send('connctSDK');
			// window.ipcRenderer.on('replay', (da) => {
			// 	console.log('1222', da);
			// });
			//更新出错
			window.ipcRenderer.on('uploadError', (e, data) => {
				//提示用户手动下载安装
				that.uploading = false;
				that.error = true;
				console.log('错误信息', data);
				// that.getNewVersion();
			});
			//更新进度
			window.ipcRenderer.on('progressInfo', (e, data) => {
				console.log('progressInfo', data);
				that.progress = Math.ceil(data.percent);
			});
			//下载完成
			window.ipcRenderer.on('downloaded', (e, data) => {
				console.log('downloaded', data);
				that.progress = 100;
				that.uploading = false;
			});
			//是否有新版本
			window.ipcRenderer.on('updateAvailable', (e, data) => {
				that.hasNewVersion = true;
			});
			window.ipcRenderer.on('version', (e, data) => {
				that.curVersion = data;
				that.SET_Version(data);
				console.log('curVersion', that.curVersion);
				this.getNewVersion();
			});
		}
	},
	methods: {
		...mapActions(['GetInfo']),
		...mapMutations(['SET_Version']),
		cancel() {
			this.hasNewVersion = false;
		},
		startUpload() {
			if (this.error && window.shell) {
				/* 跳转到web */
				window.shell.openExternal(this.upgradePath);
			} else {
				this.uploading = true;
				window.ipcRenderer.send('startUpload');
			}
		},
		quitAndInstall() {
			if (this.uploading) {
				return;
			}
			window.ipcRenderer.send('quitAndInstall');
		},
		getNewVersion() {
			postAction(sysManageapi.uploadUrl.getLastest).then((da) => {
				if (this.curVersion != da.data.upgradeVersion) {
					this.upgradePath = da.data.upgradePath;
					this.upgradeDesc = da.data.upgradeDesc;
					// this.hasNewVersion = true;
				}
			});
		},
	},
};
</script>
<style type="text/css">
@import 'assets/reset.css';
/* @import 'assets/login.css'; */
/* 基础字体图标 */
@import '/baseFont/iconfont.css';
/* 菜单字体图标 */
@import '/menuFont/iconfont.css';
a {
	color: #5697f5;
}
.ant-message {
	z-index: 1200 !important;
}
/* 进度条颜色 */
#nprogress .bar {
	background: #00bec5 !important;
}
.tooltipColor .ant-tooltip-inner {
	background-color: #00bec5;
	color: #ffffff;
	width: 440px;
	padding: 0 20px;
	border-radius: 10px;
	max-height: 500px;
	overflow: auto;
}
/* 小三角的颜色 */
.tooltipColor .ant-tooltip-arrow::before {
	background-color: #00bec5;
}
.tooltipColor .popover-hd {
	font-size: 20px;
	font-weight: 700;
	text-align: left;
	border-bottom: 1px solid #fff;
	padding: 10px 0;
}

.tooltipColor .popover-bd {
	width: 400px;
	padding: 11px 0;
	font-size: 20px;
	font-weight: normal;
}
.tooltipColor .popover-bd .studName {
	display: inline-block;
	cursor: pointer;
}
/* 正式版小三角的颜色 */
.tooltipColor_official .ant-tooltip-inner {
	background-color: #5697f5;
	color: #ffffff;
	width: 440px;
	padding: 0 20px;
	border-radius: 10px;
	max-height: 500px;
	overflow: auto;
}
/* 小三角的颜色 */
.tooltipColor_official .ant-tooltip-arrow::before {
	background-color: #5697f5;
}
.tooltipColor_official .popover-hd {
	font-size: 20px;
	font-weight: 700;
	text-align: left;
	border-bottom: 1px solid #fff;
	padding: 10px 0;
}

.tooltipColor_official .popover-bd {
	width: 400px;
	padding: 11px 0;
	font-size: 20px;
	font-weight: normal;
}
@keyframes fadeOutUp {
	from,
	5%,
	10% {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}
	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3) translate3d(-50%, 0, 0);
		transform: scale3d(0.3, 0.3, 0.3) translate3d(-50%, 0, 0);
	}

	5% {
		opacity: 1;
		-webkit-transform: scale3d(1.1, 1.1, 1.1) translate3d(-50%, 0, 0);
		transform: scale3d(1.1, 1.1, 1.1) translate3d(-50%, 0, 0);
	}

	10% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1) translate3d(-50%, 0, 0);
		transform: scale3d(1, 1, 1) translate3d(-50%, 0, 0);
	}
	75% {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1) translate3d(-50%, 0, 0);
		transform: scale3d(1, 1, 1) translate3d(-50%, 0, 0);
	}
	100% {
		opacity: 0;
		-webkit-transform: translate3d(-50%, -100%, 0) scale3d(1, 1, 1);
		transform: translate3d(-50%, -100%, 0) scale3d(1, 1, 1);
	}
}

@-webkit-keyframes bounceIn {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
		transform: scale3d(0.9, 0.9, 0.9);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(0.97, 0.97, 0.97);
		transform: scale3d(0.97, 0.97, 0.97);
	}

	to {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

@keyframes bounceIn {
	from,
	20%,
	40%,
	60%,
	80%,
	to {
		-webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
		animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
	}

	0% {
		opacity: 0;
		-webkit-transform: scale3d(0.3, 0.3, 0.3);
		transform: scale3d(0.3, 0.3, 0.3);
	}

	20% {
		-webkit-transform: scale3d(1.1, 1.1, 1.1);
		transform: scale3d(1.1, 1.1, 1.1);
	}

	40% {
		-webkit-transform: scale3d(0.9, 0.9, 0.9);
		transform: scale3d(0.9, 0.9, 0.9);
	}

	60% {
		opacity: 1;
		-webkit-transform: scale3d(1.03, 1.03, 1.03);
		transform: scale3d(1.03, 1.03, 1.03);
	}

	80% {
		-webkit-transform: scale3d(0.97, 0.97, 0.97);
		transform: scale3d(0.97, 0.97, 0.97);
	}

	to {
		opacity: 1;
		-webkit-transform: scale3d(1, 1, 1);
		transform: scale3d(1, 1, 1);
	}
}

input:-webkit-autofill {
	box-shadow: 0 0 0 1000px #fff inset !important;
}
input:-internal-autofill-previewed,
input:-internal-autofill-selected {
	-webkit-text-fill-color: #333 !important;
	transition: background-color 5000s ease-in-out 0s !important;
}
input[type='text'],
input[type='password'] {
	background: none;
	border: none;
	margin-right: 20px;
	color: #333;
	outline: none;
}

input[type='text']::placeholder,
input[type='password']::placeholder {
	color: #ccc;
}
</style>
<style scoped="scoped" lang="less">
#app {
	// font-family: 'Avenir', Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* text-align: center; */
	color: #2c3e50;
	/deep/ .table-wrapper .operation {
		line-height: 1;

		a {
			&.del {
				color: @warning-color;
			}
			&.edit {
				color: @primary-color;
			}
			&.set {
				color: #5480db;
			}
		}
		a + a {
			margin-left: 12px;
		}
	}
}
.primaryColor {
	color: @primary-color!important;
}
.mt10 {
	margin-top: 10px;
}
p {
	margin-bottom: 0;
}

/deep/ .ant-btn-link {
	border: 0 solid transparent !important;
}
/deep/ .ant-menu-inline-collapsed > .ant-menu-item .iconfont + span,
/deep/ .ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .iconfont + span,
/deep/
	.ant-menu-inline-collapsed
	> .ant-menu-item-group
	> .ant-menu-item-group-list
	> .ant-menu-submenu
	> .ant-menu-submenu-title
	.iconfont
	+ span,
/deep/ .ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .iconfont + span {
	display: inline-block;
	max-width: 0;
	opacity: 0;
}
/deep/ .ant-menu-item-selected.ant-menu-item:hover,
.ant-menu-item-active.ant-menu-item-selected {
	color: #fff !important;
}
// /deep/ .ant-table-header {
// 	background: transparent;
// }
/deep/ .ant-table .ant-table-row:nth-child(even) td {
	/* background: #f4f5f8; */
}

/deep/ .ant-table-thead > tr > th {
	background: #ebf3f9;
	padding: 12px 16px;
	border-bottom: none;
}
/deep/ .ant-table .ant-table-row td,
/deep/ .ant-table-thead > tr > th,
/deep/ .ant-table-placeholder {
	//border-bottom: none;
}
/deep/ .tag {
	width: 52px;
	height: 24px;
	border: 1px solid @primary-color;
	color: @primary-color;
	border-radius: 4px;
	display: inline-block;
	text-align: center;
	&.active {
		border: 1px solid @warning-color;
		color: @warning-color;
	}
}
/* 分页样式 */
/deep/.ant-pagination-item {
	width: 48px;
}
/deep/.ant-pagination-item:focus a,
/deep/ .ant-pagination-item:hover a,
/deep/ .ant-pagination-item-active a {
	background: @primary-color;
	color: #fff;
}

.ellipsis {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
</style>
<style>
.download,
.exitappWin {
	position: fixed;
	background: rgba(0, 0, 0, 0.4);
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 9999;
}

.download .confirm,
.exitappWin .confirm {
	width: 400px;
	box-sizing: border-box;
	background: #fff;
	border-radius: 14px;
	position: fixed;
	top: 40%;
	left: 50%;
	padding-top: 60px;
	-webkit-transform: translate(-50%, -50%);
	padding-bottom: 20px;
}

.download .confirm > div,
.exitappWin .confirm > div {
	position: relative;
	z-index: 999;
}

.download .confirm .buttonGroup,
.exitappWin .confirm .buttonGroup {
	margin-top: 40px;
	height: 40px;
	overflow: hidden;
	line-height: 40px;
	text-align: center;
}

.download .confirm .buttonGroup a,
.exitappWin .confirm .buttonGroup a {
	display: inline-block;
	width: 40%;
	color: #000;
	border-radius: 20px;
	margin: 0 5px;
	background: #eee;
	font-size: 18px;
}

.download .confirm .buttonGroup a.comfirmBtn,
.exitappWin .confirm .buttonGroup a.comfirmBtn {
	background: #ffe400;
}
.download .confirm .buttonGroup a.comfirmBtn.disabled {
	opacity: 0.5;
}
.download .confirm .title {
	line-height: 40px;
	font-size: 20px;
	margin-bottom: 10px;
	text-align: center;
}
.desc {
	margin: 0 20px;
}
</style>
